<template>
	<view class="health">
		<view class="header">
			<u-tabs :list="list1" @click="tabClick"></u-tabs>
		</view>
		<u-list
					@scrolltolower="scrolltolower"
				>
					<u-list-item
						v-for="(item, index) in listContent"
						:key="item.id"
					>
						<view class="list-item" @click="handleGoDetail(item.id)">
							<view class="title">
								<view>{{item.title}}</view>
								<view>></view>
							</view>
							<view class="info">
								<view class="info_l">
									{{item.subhead}}
								</view>
								<view class="info_r">
									<image :src="baseUrl + item.fileUrl" mode="" style="width:150px;height:100px"></image>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
	</view>
</template>

<script>
	import { newsTypes, newsTypesQuery } from '@/service/api.js'
	export default {
		data() {
			return {
				baseUrl: this.$BASEImageUrl,
				
				indexList: [],
				list1: [],
				listContent: [],
				
				//新闻参数
				newsContentParams: {
					current: 1,
					size: 10,
					title: "",
					isEnable: 1,
					subhead: "",
					typeId: "",
				}
			}
		},
		onLoad() {
			this.getNewsTypes();
		},
		methods: {
			tabClick({id}) {
				this.newsContentParams.typeId = id;
				this.getNewsContent();
			},
			async getNewsTypes() {
				const params = {
					current: 1,
					size: 1000,
					title: "",
					isEnable: 0,
				};
				const { data } = await newsTypes(params);
				this.list1 = data;
				
				this.newsContentParams.typeId = data[0].id;
				this.getNewsContent();
			},
			async getNewsContent() {
				const newsContent = await newsTypesQuery(this.newsContentParams);
				if(newsContent.status == 200) {
					this.listContent = newsContent.data;
				}
			},
			handleGoDetail(id) {
				uni.navigateTo({
					url: '/pages/healthDetail/healthDetail?id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.health {
	padding: 0 20rpx;
	.list-item {
		overflow: hidden;
		border-bottom: 1px solid #eee;
		.title {
			display: flex;
			justify-content: space-between;
			font-weight: bold; 
			padding: 40rpx 0 0rpx 0;
			> view:last-child {
				color: #eee;
			}
		}
		.info {
			display: flex;
			align-items: center;
			overflow: hidden;
			height: 100%;
			justify-content: space-between;
			.info_l {
				padding-right: 14px;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				text-align: justify;
			}
			.info_r {
				// float: right;
			}
		}
	}
}
</style>
